<!--
 * @Author: 华芊芊 huaqianqian@yeah.net
 * @Date: 2023-10-24 14:27:07
 * @LastEditors: 华芊芊 huaqianqian@yeah.net
 * @LastEditTime: 2023-11-03 11:14:19
 * @FilePath: \zmglpt-ui-screen\src\views\neiguan.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div id="index" ref="appRef">
    <div class="bg">
      <dv-loading v-if="loading">Loading...</dv-loading>
      <div v-else class="host-body">
        <div class="headtop">
          <!-- 头部标题背景及时间 -->
          <div class="headtopdiv">
            <div class="fontsize14">
              <!-- 时间：  readonly editable = false -->
              <!-- <div class="timebg" style="width: 15%">
                <el-date-picker
                  size="small"
                  v-model="value1"
                  :default-value="['2023-01', '2023-05']"
                  type="monthrange"
                  range-separator="-"
                  start-placeholder="开始月份"
                  end-placeholder="结束月份"
                  format="yyyy年MM月"
                >
                </el-date-picker>
              </div> -->
              <timePicker @timeChange="timeChangeFn" />
            </div>
            <!-- {{ doctitle }} -->
          </div>
          <!-- 中间tab标题行 -->
          <div class="headbotul">
            <ul>
              <li
                v-for="(item, index) in bannerlist"
                :key="index"
                :class="liflag == index ? 'activeli' : ''"
                @click="bannertab(index)"
              >
                {{ item.name }}
              </li>
            </ul>
          </div>
          <!-- 无内容 -->
          <div class="maptabright">
            <div class="dflex">
              <div style="color: red"></div>
              <!-- <div class="fontsize14" >
                                    时间:
                                    <div class="lineblock lightblue timebg block dark_box">
                                        <el-date-picker
                                            size="small"
                                            editable = false
                                            popper-class="dark_form"
                                            v-model="value1"
                                            type="monthrange"
                                            range-separator	='~'
                                            :picker-options="forbiddenTime"
                                            :default-value="['2023-01','2023-05']">
                                        </el-date-picker>
                                    </div>
                                </div> -->
            </div>
          </div>
        </div>

        <div class="contentmid">
          <innerzon v-if="contentmid == 0" :picktimeTemp="picktimeTemp"></innerzon>
          <provincial v-if="contentmid == 1" :picktimeTemp="picktimeTemp"></provincial>
          <seizedprov v-if="contentmid == 2" :picktimeTemp="picktimeTemp"></seizedprov>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import drawMixin from "../utils/drawMixin";
import { formatTime } from "../utils/index.js";
import regulation from "./regulation/index";
import basicManagement from "./basicManagement/index";
import Qjzl from "./qjzl/qjzl";

// import Qjzl from './qjzl/qjzl'
// import centerLeft1 from './centerLeft1'
// import centerLeft2 from './centerLeft2'
// import centerRight1 from './centerRight1'
// import centerRight2 from './centerRight2'
// import center from './center'
// import bottomLeft from './bottomLeft'
// import bottomRight from './bottomRight'
import certificate from "./certificate/certificate.vue";

//内管总览
import innerzon from "./InnerTube/innerzon.vue";
import provincial from "./InnerTube/provincial.vue";
import seizedprov from "./InnerTube/seizedprov.vue";

import timePicker from "../components/timePicker/index.vue";
export default {
  mixins: [drawMixin],
  data() {
    return {
      picktimeTemp:{},
      demo: false,
      timing: null,
      loading: true,
      dateDay: null,
      dateYear: null,
      dateWeek: null,
      weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
      decorationColor: ["#568aea", "#000000"],
      contentmid: 0,
      doctitle: "内部监管数据大屏",

      liflag: 0,
      bannerlist: [
        {
          name: "全省概况",
        },
        {
          name: "省内流出",
        },
        {
          name: "省内查获",
        },
      ],

      //月份选择器相关数据
      pickerOptions: {
        shortcuts: [
          {
            text: "本月",
            onClick(picker) {
              picker.$emit("pick", [new Date(), new Date()]);
            },
          },
          {
            text: "今年至今",
            onClick(picker) {
              const end = new Date();
              const start = new Date(new Date().getFullYear(), 0);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近六个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setMonth(start.getMonth() - 6);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      // value1: ["2023-01", "2023-05"],
      forbiddenTime: {
        disabledDate(time) {
          // return time.getTime() < Date.now() - 8.64e7; // 不可选历史天，可选当前天，可选未来天
          // return time.getTime() > Date.now() - 8.64e7; // 可选历史天，不可选当前天，不可选未来天
          // return time.getTime() < Date.now(); // 不可选历史天，不可选当前天，可选未来天
          // return time.getTime() > Date.now(); // 可选历史天，可选当前天，不可选未来天
          /* 
                    1、8.64e7 是科学计数法 8.64 乘以 10 的 7 次方，即为 86400000 也就是 1000*60*60*24 也就是一天的毫秒数。
                    2、Date.now() 方法返回得到自 1970年1月1日00:00:00(UTC) 到当前时间的毫秒数。
                    3、是否减去 8.64e7 也就是是否往前推移一天，也就是是否包含当前天
                    */
        },
      },
    };
  },
  components: {
    Qjzl,
    regulation,
    basicManagement,
    timePicker,
    certificate,

    //内管总览
    innerzon,
    provincial,
    seizedprov,
    //Qjzl
    //     centerLeft1,
    //     centerLeft2,
    //     centerRight1,
    //     centerRight2,
    //     center,
    //     bottomLeft,
    //     bottomRight
  },

  mounted() {
    this.timeFn();
    this.cancelLoading();
  },
  beforeDestroy() {
    clearInterval(this.timing);
  },
  methods: {
    timeChangeFn(timeObj) {
      console.log(timeObj, "timeobj------------123");
      this.picktimeTemp = timeObj;
    },
    timeFn() {
      this.timing = setInterval(() => {
        this.dateDay = formatTime(new Date(), "HH: mm: ss");
        this.dateYear = formatTime(new Date(), "yyyy-MM-dd");
        this.dateWeek = this.weekday[new Date().getDay()];
      }, 1000);
    },
    cancelLoading() {
      setTimeout(() => {
        this.loading = false;
      }, 600);
    },
    bannertab(item) {
      this.liflag = item;
      this.contentmid = item;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../assets/scss/index-neiguan.scss";

.maptabright {
  position: absolute;
  top: 65px;
  left: 26px;
}

::v-deep.dark_box {
  .el-range-separator {
    color: #34effe;
  }

  .el-range-editor {
    background-color: #1f2463;
    border: none;
  }

  .el-range-input {
    background-color: #1f2463;
    color: aliceblue;
    font-size: 18px !important;
    color: #34effe;
  }
}
</style>
